<template>
	<div>
		<div :id="'lineChartId_' + echartsId" class="ichart"></div>
	</div>
</template>

<script>
import * as echarts from 'echarts';
export default {
	name: 'GovSuperviseAdminTabularData',
	props: {
		ichartName: {
			type: String,
			required: false,
		},
		echartsId: {
			type: String,
			default: '1'
		},
	},
	data() {
		return {
			myChart: '',
			dataList: [], //数据列表
			xData: [],
			yData: [],
		};
	},
	created() {

	},
	mounted() { },
	methods: {
		getDataList(data, name) { //获取areaId
			this.dataList = data
			//x轴数据
			this.xData = []
			this.yData = []
			this.dataList.forEach(res => {
				this.xData.push(res.x)
				this.yData.push(res.y)
			})
			//y轴数据
			this.initChart()
		},
		domIsExistence(name) {
			if (name != null && name != "" && name != undefined) {
				name.dispose(); //解决echarts dom已经加载的报错
			}
		},
		// 交易数据汇总订单金额明细
		initChart() {
			this.domIsExistence(this.myChart)
			this.myChart = echarts.init(document.getElementById('lineChartId_' + this.echartsId));
			let that = this
			let option = {
				xAxis: {
					type: 'category',
					// x轴数据文字颜色
					axisLabel: {
                        //x轴文字的配置
                        textStyle: {
                            color: "#576276",
                        },
					},
					nameGap: 7,//坐标轴名称与轴线之间的距离。
					// x轴那天坐标轴线的颜色
					axisLine: {
						show: true, //隐藏轴线
						lineStyle: {
							color: '#B3B8BE',
						}
					},
					//x轴上面刻度线隐藏
					axisTick: {
						show: false,
					},
					// x轴上面指示线
					// axisPointer: {
					// 	show: true,
					// 	type: "line",
					// 	z: 0,
					// 	lineStyle: {
					// 		color: '#FFB6A5',
					// 		type: "dashed",
					// 		dashOffset: 0.5,
					// 		join: "round"
					// 	}
					// },
					triggerEvent: true,
					//这里是x轴数据
					data: this.xData
				},
				//设置网格
				grid: {
					top: 20,
					bottom: 60,
					right: 20,
					left: 50,
				},
				//y轴设置
				yAxis: {
					type: 'value',
					//y轴标签文字颜色
					axisLabel: {
						formatter: '{value}',
						//y轴文字的配置
						textStyle: {
                            color: "#9198A5",
                        },
					},
					// y轴分割线设置为虚线
					splitLine: {
						show: true,
						lineStyle: {
							color: "#EEF1F7",
						}
					},
					// x轴那天坐标轴线的颜色
					axisLine: {
						show: true, //隐藏轴线
						lineStyle: {
							color: '#B3B8BE',
						}
					},
				},
				//设置提示为点击时
				tooltip: {
					// showContent: true,
					trigger: 'axis',
					show: true,
					// triggerOn: 'click',
					formatter: function (params) {
						// console.log('params[0]',params[0])
						return params[0].axisValue + '</br>签约数量：' + params[0].value
					},
					// backgroundColor:'#t',
					// textStyle : {
					// 	color: '#ffffff',
					// },
				},
				//设置曲线的颜色
				// color: ['#5874c7'],
				series: [{
					//这里是数据
					data: this.yData,
					type: 'line',
					//设置为平滑，默认为折线
					smooth: true,
					labelLine: {
						normal: {
							// 统一设置指示线长度
							length: 45,
						}
					},
					lineStyle:{
						width:1
					},
				}]
			}
			if (this.echartsId == 2) {
                option.grid = {
                    left: 60,
                    right: 60,
                    top: 10,
                    bottom: 60
                };
				option.series[0].color = '#00E6D8'
				option.series[0].lineStyle.width = 4
				// 高亮
				option.series[0].emphasis = {
						disabled: false,
						scale: 3,
						itemStyle: {
							color: "#ffffff",
							borderColor: "#00E6D8",
							borderWidth: 3.5,
						}
					}
					option.axisPointer = {
						type: 'shadow', // 默认为 'line'，可以设置为 'shadow' 或其他
						label: {
							show: false // 是否显示指示器标签
						},
						lineStyle:{
							color: '#2347B4' // 设置指示器颜色
						}
						
					}
				option.xAxis.axisLine.lineStyle.color = '#2CA6FF'  //x轴线的颜色以及宽度
				option.xAxis.axisLabel.textStyle.color = '#ffffff'  //x轴文字的配置
				option.yAxis.axisLine.lineStyle.color = '#2CA6FF'  //y轴线的颜色以及宽度
				option.yAxis.axisLabel.textStyle.color = '#ffffff'  //y轴文字的配置
				option.yAxis.splitLine.lineStyle.color = '#1A3DA5'  //y轴分割线配置
				option.tooltip.backgroundColor =  'transparent'
				option.tooltip.borderColor =  'transparent'
				option.tooltip.formatter = function(params){
					let res = 
					`
					<div style='box-shadow: 0px 0px 9px 0px #5DA7FF inset;box-sizing: border-box;width:97px;padding:9px 12px 14px 12px;border-radius:6px;border: 1px solid #1B9CFF;background:#001C6C;'>
						<div style='color:#FFFFFF;font-size: 12px;font-weight: bold;margin-bottom: 9px;'>${params[0].axisValue}</div>
						<div style='font-size:10px;color:#ffffff;display: flex;align-items: center;justify-content: space-between;'>
						  <span>签约数量</span>
						  <span>${params[0].value}</span>
						</div>
					</div>
					`
					return res
					// return params[0].axisValue + '</br>签约数量：' + 
				}
			}
			this.myChart.setOption(option)
		},
	},
};

</script>

<style lang="scss" scoped>
.ichart {
	width: 100%;
	height: 100%;
	
}
</style>
